<template>
    <div id='demo'>
       <div class="content">
           <div class="banxin">
               <!-- 第1页 -->
                <div class="ke index">
                    <img src="../../../public/images/data/1.jpg"   width="794px" height="1160px" alt="">
                    <p class="jichu">DISC行为风格部分和驱动力报告</p>
                    <div class="xingming">
                        <p>基础版</p>
                        <div class="xm">姓名:{{username}}</div>
                        <div class="data">{{nowtime}}</div>
                    </div>
                </div>
                <!-- 第2页  -->
                <div class="ke second">
                   <p class="biaoti">目录</p>
                   <div class="mulu">
                       <Row class="row">
                           <Col span="20">引言</Col>
                           <Col span="1" class="col">3</Col>
                       </Row>
                      <Row class="row">
                           <Col span="20">DISC概述</Col>
                           <Col span="1" class="col">4</Col>
                       </Row>
                      <Row class="row">
                           <Col span="20">行为风格特征</Col>
                           <Col span="1" class="col">5</Col>
                       </Row>
                       <Row class="row">
                           <Col span="20">DISC图表</Col>
                           <Col span="1" class="col">7</Col>
                       </Row>
                       <Row class="row">
                           <Col span="20">人格特质</Col>
                           <Col span="1" class="col">9</Col>
                       </Row>
                       <Row class="row">
                           <Col span="20">子特质</Col>
                           <Col span="1" class="col">10</Col>
                       </Row>
                       <Row class="row">
                           <Col span="20">调试表变化</Col>
                           <Col span="1" class="col">11</Col>
                       </Row>
                       <Row class="row">
                           <Col span="20">人际关系与沟通风格提示</Col>
                           <Col span="1" class="col">12</Col>
                       </Row>
                       <Row class="row">
                           <Col span="20">强度指数</Col>
                           <Col span="1" class="col">13</Col>
                       </Row>
                       <Row class="row">
                           <Col span="20">关系图</Col>
                           <Col span="1" class="col">14</Col>
                       </Row>
                       <Row class="row">
                           <Col span="20">驱动力</Col>
                           <Col span="1" class="col">16</Col>
                       </Row>
                   </div>
                </div>
                <!-- 第3页  -->
                <div class="ke three">
                    <div class="biaoti">引言<span>DISC行为风格部分</span></div>
                     <p class="baogao">恭喜您完成DISC个性报告！</p>
                     <p class="xiangxi">
                         本报告将为您提供关于您的行为风格在个人生活和职业生涯中,您是如何的应对问题、影响他人并且如何应对变化和处理规则与流程的相关见解。
                     </p>
                      <p class="baogao">您的报告分为三个主要部分：</p>
                      <p class="xiangxi">第一部分  您将了解您的最高DISC维度和您的行为风格倾向。</p>
                      <p class="xiangxi">第二部分   您将能够探索您的强度指数，从而更加了解您的潜在的优势和劣势。</p>
                      <p class="xiangxi">第三部分  将帮助您发现您的D、I、S和C维度结合并形成您独特的DISC关系图。</p>
                      <p class="xiangxi cur">这份报告百分百准确吗？并不尽然。报告只是评估行为风格，告诉您展现出来的行为倾向。当您阅读您的报告时，请记住，DISC中没有任何维度或模式的好坏之分，没有任何答案对错之分。相反，报告显示了您对当前环境的行为反应。</p>
                      <p class="baogao">现在，我们开始吧。</p>
                </div>
                 <!-- 第4页-->
                <div class="ke four">
                    <img src="../../../public/images/data/4.png"  width="760px" height="1160px" alt="">
                </div> 
                 <!-- 第5页 -->
                <div class="ke five">
                    <p class="biaoti">您的行为风格特征</p>
                    <div class="center">
                        报告的这一部分为您提供了对DISC行为风格的深入了解。这有时被称为您的“个性风格”，它有助于您更好地理解您在环境中和与他人互动时所偏好和可预测的行为。
                    </div>
                    <div class="xianxing">
                        <div class="center">
                            <p v-if="dataArr.realMe!=null">{{dataArr.realMe.showFeature}}</p>
                        </div>
                    </div>
                     <div class="yinxing">
                        <div class="center">
                            <p v-if="dataArr.realMe!=null">{{dataArr.realMe.hideFeature}}</p>
                        </div>
                    </div>
                </div> 
                <!-- 第6页-->
               <div class="ke six">
                    <p class="biaoti">您的行为风格特征</p>
                    <div class="center">
                        报告的这一部分为您提供了对DISC行为风格的深入了解。这有时被称为您的“个性风格”，它有助于您更好地理解您在环境中和与他人互动时所偏好和可预测的行为。
                    </div>
                    <div class="xingwei">
                        <div class="center">
                            <p v-if="dataArr.realMe!=null">{{dataArr.realMe.childDescription}}</p>
                        </div>
                    </div>
                </div>
                <!-- 第7页 -->
                <div class="ke seven">
                    <p class="biaoti">DISC图表</p>
                    <div class="weidu">
                       下面的图表有助于正确看待DISC的四个维度。
                    </div>
                    <div class="center">
                        <div class="top">
                            <div class="left"></div>
                            <div class="right">
                                <p>本我分析表</p>
                                <div class="benwo">
                                    本我分析表的最高点，代表着您最自然真实的内在动机和欲求。这种行为之所以常在您处于压力时显现，是因为您没有“空间”或“时间” 调整行为。 
                                </div>
                                
                            </div>
                        </div>
                        <div class="bottom">
                            <div class="left"></div>
                            <div class="right">
                                <p>现实的我分析表</p>
                                <div class="benwo">
                                    外在分析表描述应试者认为自己应呈现的理想行为。这种图形通常代表个人试图在工作中采用的行为类型。 
                                </div>
                            </div>
                        </div>
                        <div class="footer">
                            <div class="left" id="demo1">
                            </div>
                            <div class="right" id="demo7">
                            </div>
                        </div>
                    </div>
                </div>
                 <!-- 第8页-->
                  <div class="ke eight">
                    <p class="biaoti">DISC图表</p>
                    <div class="top">
                        <div class="left"></div>
                        <div class="right">
                            <p>调试表</p>
                            <div class="benwo">
                                调试表图形显示被测试者的本我和现实的我分析表之间的改变，并凸显被测试者正在进行的性格及行为风格的调整。  
                            </div>
                            
                        </div>
                    </div>
                    <div class="bottom">
                        <div class="inner" id="demo5">
                        </div>
                    </div>
                </div>
                 <!-- 第9页 -->
                      <div class="ke nine">
                        <p class="biaoti">人格特质</p>
                        <div class="gaishu">
                            <div class="left">
                                <div class="gs">
                                    <p>概述:</p>
                                    <span v-if="dataArr.realMe!=null"> {{dataArr.realMe.summary}}</span>
                                </div>
                                 <div class="guanjianci">
                                      <p>关键词:</p>
                                    <span v-if="dataArr.realMe!=null"> {{dataArr.realMe.keywords}}</span>
                                </div>
                            </div>
                            <div class="right">
                                <p id="demo4"> 
                                    
                                </p>
                            </div>
                        </div>
                        <div class="nr">
                            <div class="biaoti">人格特质</div>
                            <p v-if="dataArr.realMe!=null">
                               {{dataArr.realMe.personality.substring(0,43)}}
                            </p>
                            <ul v-if="dataArr.realMe!=null">
                                <li>
                                    <span class="yuan">•</span>
                                    <span class="neirong">{{dataArr.realMe.personality.substring(43,50)}}</span>
                                </li>
                                <li>
                                    <span class="yuan">•</span>
                                    <span class="neirong">{{dataArr.realMe.personality.substring(50,58)}}</span>
                                </li>
                                <li>
                                    <span class="yuan">•</span>
                                    <span class="neirong">{{dataArr.realMe.personality.substring(58,69)}}</span>
                                </li>
                                <li>
                                    <span class="yuan">•</span>
                                    <span class="neirong">{{dataArr.realMe.personality.substring(69,82)}}</span>
                                </li>
                                <li>
                                    <span class="yuan">•</span>
                                    <span class="neirong">{{dataArr.realMe.personality.substring(82,93)}}</span>
                                </li>
                            </ul>
                        </div>
                        <div class="tu">
                            <div class="left">
                                <div class="top">
                                    <span class="youshi">优势</span>
                                    <span class="jiazhi">他们如何为团队带来价值</span>
                                </div>
                                <div class="bottom">
                                     <ul v-if="dataArr.realMe!=null">
                                         <li>
                                             <span class="yuan">•</span>
                                             <span class="neirong">{{dataArr.realMe.advantage.substring(0,8)}}</span>
                                         </li>
                                         <li>
                                             <span class="yuan">•</span>
                                             <span class="neirong">{{dataArr.realMe.advantage.substring(8,29)}}</span>
                                        </li>
                                         <li>
                                             <span class="yuan">•</span>
                                             <span class="neirong">{{dataArr.realMe.advantage.substring(30,41)}}</span>
                                        </li>
                                     </ul>
                                </div>
                            </div>
                            <div class="right">
                                 <div class="top">
                                    <span class="youshi">潜在的弊端</span>
                                    <span class="jiazhi">他们需要克服的挑战</span>
                                 </div>
                                 <div class="bottom">
                                     <ul  v-if="dataArr.realMe!=null">
                                        <li>
                                             <span class="yuan">•</span>
                                             <span class="neirong">{{dataArr.realMe.inferiority.substring(0,8)}}</span>
                                        </li>
                                        <li>
                                            <span class="yuan">•</span>
                                             <span class="neirong">{{dataArr.realMe.inferiority.substring(8,17)}}</span>
                                        </li>
                                        <li>
                                            <span class="yuan">•</span>
                                            <span class="neirong"> {{dataArr.realMe.inferiority.substring(17,29)}}</span>
                                        </li>
                                        <li>
                                            <span class="yuan">•</span>
                                            <span class="neirong"> {{dataArr.realMe.inferiority.substring(29,43)}}</span>
                                        </li>
                                     </ul>
                                 </div>
                            </div>
                        </div>
                   </div>
                  <!-- 第10页 -->
                   <div class="ke ten">
                    <div class="biaoti">子特征</div>
                    <div class="guanjianci">
                         关键词：<span v-if="dataArr.realMe!=null">{{dataArr.realMe.childKeywords}}</span>
                    </div>
                    <div class="di">
                        <div class="t_di">
                            <p v-if="dataArr.realMe!=null">{{dataArr.realMe.childType}}</p>
                        </div>
                        <div class="w_di"  v-if="dataArr.realMe!=null">
                           {{dataArr.realMe.childParagraph}}
                        </div>
                    </div>
                </div>
                 <!-- 第11页  -->
                <div class="ke eleven">
                     <div class="biaoti">调试表的变化</div>
                     <div class="center">
                         <div class="left" id="demo6"></div>
                         <div class="right">
                             每个变化都有不同的意义，一些变化比较普遍，而另一些变化则代表了更困难的适应。变化的的大小也很重要。很小的百分比变动非常频繁，不太可能代表严重的困难，而较大的变动（名义上大于25％或图表的四分之一）将具有更大的意义。
                         </div>
                     </div>
                     <!-- D上升25%或下降25%的时候-->
                     <div class="xiajiang" v-if="dataArr.changeData!=null &&  dataArr.changeData.change_percent_D>25 || dataArr.changeData!=null && dataArr.changeData.change_percent_D<-25">D向{{dataArr.changeData.change_percent_S>25?'上升+':'下降'}}{{dataArr.changeData.change_percent_D}}</div>
                     <div class="content"  v-if="dataArr.changeData!=null &&  dataArr.changeData.change_percent_D>25 || dataArr.changeData!=null && dataArr.changeData.change_percent_D<-25">
                        <p v-if="dataArr.changeData!=null">
                        {{dataArr.changeData.change_D_note}}
                        </p>
                     </div>
                     <!-- D上升25%或下降25%的时候 -->
                     <!-- I上升25%或下降25%的时候 -->
                     <div class="xiajiang" v-if="dataArr.changeData!=null &&  dataArr.changeData.change_percent_I>25||dataArr.changeData!=null && dataArr.changeData.change_percent_I<-25">I{{dataArr.changeData.change_percent_S>25?'上升+':'下降'}}{{dataArr.changeData.change_percent_I}}</div>
                     <div class="content"  v-if="dataArr.changeData!=null &&  dataArr.changeData.change_percent_I>25||dataArr.changeData!=null && dataArr.changeData.change_percent_I<-25 ">
                        <p v-if="dataArr.changeData!=null">
                        {{dataArr.changeData.change_I_note}}C
                        </p>
                     </div>
                     <!-- I上升25%或下降25%的时候 -->
                     <!-- S上升25%或下降25%的时候 -->
                     <div class="xiajiang" v-if="dataArr.changeData!=null &&  dataArr.changeData.change_percent_S>25||dataArr.changeData!=null && dataArr.changeData.change_percent_S<-25">S向{{dataArr.changeData.change_percent_S>25?'上升+':'下降'}}{{dataArr.changeData.change_percent_S}}</div>
                     <div class="content"  v-if="dataArr.changeData!=null &&  dataArr.changeData.change_percent_S>25||dataArr.changeData!=null && dataArr.changeData.change_percent_S<-25">
                        <p v-if="dataArr.changeData!=null">
                        {{dataArr.changeData.change_S_note}}
                        </p>
                     </div>
                    <!-- S上升25%或下降25%的时候 -->
                    <!-- C上升25%或下降25%的时候 -->
                     <div class="xiajiang" v-if="dataArr.changeData!=null &&  dataArr.changeData.change_percent_C>25||dataArr.changeData!=null && dataArr.changeData.change_percent_C<-25">C向{{dataArr.changeData.change_percent_C>25?'上升+':'下降'}}{{dataArr.changeData.change_percent_C}}</div>
                     <div class="content"  v-if="dataArr.changeData!=null &&  dataArr.changeData.change_percent_C>25|| dataArr.changeData!=null && dataArr.changeData.change_percent_C<-25">
                        <p v-if="dataArr.changeData!=null">
                       {{dataArr.changeData.change_C_note}}
                        </p>
                     </div>
                     <!-- C上升25%或下降25%的时候 -->
                </div>
                <!--  第12页 -->
                <div class="ke twelve">
                    <img src="../../../public/images/data/12.png"  width="750px" height="1160px" alt="">
                </div>
                 <!--  第13页 -->
                  <div class="ke fivetheen">
                    <p class="biaoti">强度指标</p>
                    <div class="content">
                        强度指数是根据您的DISC测评数据来衡量您可能具有的行为特征的自我评价描述。根据您的回答，这份报告对那些描述他人行为的词语做了标记。它们描述了他如何解决问题和迎接挑战。影响人们，对环境的节奏做出反应，以及他如何对他人指定的规则和程序做出反应。
                    </div>
                    <div class="shuju">
                        <div class="sj" v-if="dataArr.realMe!=null">
                            <p>
                                <ul class="ulli">
                                    <li v-for="(item,index) in D1_type" :key="index" :class="{'red':dataArr.realMe.percent_D>50&&dataArr.realMe.percent_D > (index+28-index*2)*3.57}">{{item}}</li>
                                </ul>
                            </p>
                            <p>
                                <ul class="ulli">
                                    <li v-for="(item,index) in I1_type" :key="index" :class="{'yellow':dataArr.realMe.percent_I>50&&dataArr.realMe.percent_I > (index+28-index*2)*3.4}">{{item}}</li>
                                </ul>
                            </p>
                            <p>
                                <ul class="ulli">
                                     <li v-for="(item,index) in S1_type" :key="index" :class="{'green':dataArr.realMe.percent_S>50&&dataArr.realMe.percent_S > (index+28-index*2)*3.4}">{{item}}</li>
                                </ul> 
                            </p>
                            <p class="cur">
                                <ul class="ulli">
                                    <li v-for="(item,index) in C1_type" :key="index" :class="{'blue':dataArr.realMe.percent_C>50&&dataArr.realMe.percent_C > (index+28-index*2)*3.57}">{{item}}</li>
                                </ul>
                            </p>
                        </div>
                        <div class="cn">
                            <p style="background:#BE242E;">D:支配型</p>
                            <p style="background:#F3BE34;">I:影响型</p>
                            <p style="background:#1E6C42;">S:稳健型</p>
                            <p style="background:#175A8F;" class="cur">C:谨慎型</p>
                        </div>
                        <div class="bt" v-if="dataArr.realMe!=null">
                           <p>
                                <ul class="ulli">
                                     <li 
                                        v-for="(item,index) in D2_type" 
                                        :key="index" 
                                        :class="{'red': dataArr.realMe.percent_D <50 && dataArr.realMe.percent_D <(index+14-index*2)*3.57}"
                                     >
                                     {{item}}
                                     </li>
                                </ul>
                            </p>
                            <p>
                                <ul class="ulli">
                                    <li 
                                        v-for="(item,index) in I2_type" 
                                        :key="index" 
                                        :class="{'yellow': dataArr.realMe.percent_I <50 && dataArr.realMe.percent_I <(index+15-index*2)*3.4}" 
                                        >
                                    {{item}}
                                    </li>
                                </ul>
                            </p>
                            <p>
                                 <ul class="ulli">
                                    <li 
                                        v-for="(item,index) in S2_type" 
                                        :key="index" 
                                        :class="{'green': dataArr.realMe.percent_S <50 && dataArr.realMe.percent_S <(index+15-index*2)*3.4}"
                                    >
                                    {{item}}
                                    </li>
                                </ul>
                            </p>
                            <p class="cur">
                                 <ul class="ulli">
                                     <li 
                                     v-for="(item,index) in C2_type" 
                                     :key="index" 
                                     :class="['cur',{'blue': dataArr.realMe.percent_C <50 && dataArr.realMe.percent_C <(index+15-index*2)*3.57}]"
                                     >
                                     {{item}}
                                     </li>
                                </ul>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="ke thirteen">
                    <p class="biaoti">关系图</p>
                    <p class="center">
                        除了您收到的关于您的行为风格的文本之外，DISC关系图还添加了一个视觉表示，允许您：查看您 “本我”的行为风格（圆形），查看您“现实的我”行为风格（五角星）。注意您对自己行为的适应程度。请注意，在下一页中，您的“本我”样式（圆形）和“现实的我”样式（星形）将绘制在DISC关系图上。如果它们被绘制在不同的框中，那么您就在调整您的行为。两个绘制点之间的距离越近，就越能适应自己的行为。
                    </p>
                </div>
                <!-- 14\15页 关系图-->
                <div class="ke fourteen">
                  <EchartItem v-if="dataArr.realMe!=null" class="echart" :realityMe="parseInt(dataArr.realMe.position)" :thisScore='parseInt(dataArr.naturalMe.position)'></EchartItem>
                </div>
                <div class="ke fourteen">
                    <img src="../../../public/images/data/16.png"  width="750px" height="1160px" alt="">
                </div>
                <!-- 第17页 -->
             <div class="ke sixtheen">
                 <div class="binshantu" >
                    <div class="bs">
                        <p id="demo3"></p>
                    </div>
                    <div class="bs" id="demo2"></div>
                 </div>
             </div>
             <!--  第18页 -->
             <div class="ke seventheen">
                <p class="biaoti">驱动力</p>
                <div class="biao1">
                    <div class="top" v-if="dataArr.drivingForce1!=null">驱动力之一：{{dataArr.drivingForce1.coreValue}}</div>
                    <div class="center">
                        <div class="c1" v-if="dataArr.drivingForce1!=null">{{dataArr.drivingForce1.note_1}}</div>
                        <div class="c1" v-if="dataArr.drivingForce1!=null">{{dataArr.drivingForce1.note_2}}</div>
                    </div>
                    <div class="bottom">
                        <div class="title">
                            <p>价值观</p>
                            <p>寻求</p>
                            <p>避免</p>
                            <p class="cur">战略</p>
                        </div>
                        <div class="bt" v-if="dataArr.drivingForce1!=null">
                            <p>{{dataArr.drivingForce1.note_3_1}}</p>
                            <p>{{dataArr.drivingForce1.note_3_2}}</p>
                            <p>{{dataArr.drivingForce1.note_3_3}}</p>
                            <p class="cur">{{dataArr.drivingForce1.note_3_4}}</p>
                        </div>
                    </div>
                </div>
                <div class="biao2">
                    <div class="top" v-if="dataArr.drivingForce2!=null">驱动力之二：{{dataArr.drivingForce2.coreValue}}</div>
                    <div class="center">
                        <div class="c1" v-if="dataArr.drivingForce2!=null">{{dataArr.drivingForce2.note_1}}</div>
                        <div class="c1" v-if="dataArr.drivingForce2!=null">{{dataArr.drivingForce2.note_2}}</div>
                    </div>
                    <div class="bottom">
                        <div class="title">
                            <p>价值观</p>
                            <p>寻求</p>
                            <p>避免</p>
                            <p class="cur">战略</p>
                        </div>
                        <div class="bt" v-if="dataArr.drivingForce2!=null">
                             <p>{{dataArr.drivingForce2.note_3_1}}</p>
                            <p>{{dataArr.drivingForce2.note_3_2}}</p>
                            <p>{{dataArr.drivingForce2.note_3_3}}</p>
                            <p class="cur">{{dataArr.drivingForce2.note_3_4}}</p>
                        </div>
                    </div>
                </div>
             </div>
           </div>  
       </div>
    </div>
</template>

<script>
import html2canvas from 'html2canvas';
import echarts from 'echarts';
import {clone} from '../../lib/tools';
import EchartItem from './echaths'
import axios from 'axios';
import moment from 'moment';
import pdf from './pdf.less';
import querystring from 'querystring';
    export default {
        components:{EchartItem},
        data() {
            return {  
///////////////////////////////////////////////////本我图标////////////////////////////////////////////////////// 
                options1:{
                    title: {
                        text: '本我',
                         x:'center',
                        y:'top',
                        textAlign:'left',
                        padding: 20,
                        textStyle:{
                            color: '#333333',//颜色
                            fontSize: 16,//大小
                            fontWeight: '400',//粗细
                            fontFamily: '思源黑体',//字体
                        }   
                    },
                    tooltip: {},
                    //设置表格的padding和margin线
                     grid: {  
                        left: '2%',  
                        bottom: '2%',
                        containLabel: true  
                    },
                    xAxis: {
                        data: ['D', 'I', 'S', 'C'],
                        axisLabel:{
                            show: true,
                            textStyle: {
                                color: '#33333',  //更改坐标轴文字颜色
                                fontSize : 14,      //更改坐标轴文字大小
                                maxInterval: 3600 * 24 * 1000
                            },
                        },
                        //横轴颜色设置
                        axisLine:{
                            lineStyle:{
                                color:'#c5c5c5'
                            }
                        },
                        //去掉中间的网格线
                         splitLine:{
                            show:false
                        }, 
                    },
                    // Y周配置
                    yAxis: [
                        {
                            //最大为多少
                            max:100,
                            //最小为多少
                            min:0,
                            type: 'value',
                            //每次增加几个
                            interval:50, 
                            //让y轴倒置
                            // inverse:true,
                           //去掉中间的网格线
                            splitLine:{
                                show:false
                            },
                             axisLabel:{
                               // 自定义y轴刻度信息
                                formatter: function (value) {
                                    var texts = [];
                                    if(value==0){
                                        texts.push('0')
                                    }else if(value==50){
                                        texts.push('50')
                                    }else if(value==100){
                                        texts.push('100')
                                    }
                                    else if(value==10||value==20||value==30||value==40||value==60||value==70||value==80||value==90){
                                        texts.push('');
                                    }
                                    return texts;
                                }
                            },
                        }],
                    series: [{
                        name: '成绩',
                        type: 'bar',
                        data: [50, 42, 72, 82],
                        //控制柱子的宽度
                        barWidth : 25,
                        itemStyle: {   
                            //通常情况下：
                            normal:{  
                　　　　　　　　　　　　//每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                                color: function (params){
                                    var colorList = ['rgb(227,23,13)','rgb(255,255,0)','rgb(34,139,34)','rgb(0,0,255)'];
                                    return colorList[params.dataIndex];
                                },
                                //柱子中间显示数据
                                label: {
                                        show: true, //开启显示
                                        position: 'top', //在上方显示
                                        textStyle: { //数值样式
                                            color: 'black',
                                            fontSize: 14
                                        }
								}
                            },
                        },
                        /*设置一条平均线*/
                        markLine:{
                            symbol:"none",
                             data : [
                                [
                                {name: '平均线', value: 50, x: 35, y:209.5,lineStyle:{
                                    normal:{
                                        color:"#c5c5c5",
                                    }
                                }},
                                {name: '平均线', x: 290, y:209.5}
                               ],
                            ] 
                        }
                    }],
                },
////////////////////////////////////////////////////冰山图标////////////////////////////////////////////////////// 
            options2:{
                    title: {
                        text: '',
                         x:'center',
                         y:'top',
                        textAlign:'left',
                        padding: 16, 
                    },
                    tooltip: {},
                    xAxis: {
                       splitLine:{
                           show:false
                        },
                        data: ['挑战', '认可', '欣赏', '接受','稳定','理解','信息','控制'],
                        //反转坐标轴
                        inverse:true,
                        //设置lable的位置
                        position:'top',
                        //  minInterval: 1222,
                        //横轴颜色设置
                        axisLine:{
                            lineStyle:{
                                color:'#c5c5c5'
                            }
                        },
                        axisLabel: {  
                                show: true,
                                textStyle: {
                                color: '#33333',  //更改坐标轴文字颜色
                                fontSize : 12      //更改坐标轴文字大小
                                },  
                            //倾斜显示
                            interval:0,  
                            rotate:40, 
                            fontSize : 14,
                            position: 'top',
                        },
                        //去掉中间的网格线
                         splitLine:{
                            show:false
                        },                      
                    },
                    // Y周配置
                    yAxis: [
                            {
                                //最大为多少
                                max: 100,
                                // //最小为多少
                                min:0,
                                type: 'value',
                                //每次增加几个
                                interval:50,
                                //倒置y轴
                                // inverse:true,
                                //隐藏网格线
                                splitLine:{
                                    show:false
                                },
                                //y轴刻度显示
                                tickPositions: [0, 50,100],
                                //去掉中间的网格线
                                splitLine:{
                                        show:false
                                },
                                //图表倒置
                                inverse: true,
                                axisTick:{ //y轴刻度线
                                    show:function (value) {
                                    var texts = [];
                                    if(value==0){
                                        texts.push(true)
                                    }else if(value==50){
                                        texts.push(true)
                                    }else if(value==100){
                                        texts.push(true)
                                    }
                                    else if(value==10||value==20||value==30||value==40||value==60||value==70||value==80||value==90){
                                        texts.push(false);
                                    }
                                    return texts;
                                }
                                },
                        },
                    ],
                    grid: {  
                        left: '1%',  
                        right: '0',  
                        bottom: '10%',
                        top:'14%',
                        containLabel: true  
                    },
                    series: [{
                        name: '成绩',
                        type: 'bar',
                        barWidth : 25,
                        data: [10, 30, 43, 18,60,60,40,79],
                        itemStyle: {   
                            //通常情况下：
                            normal:{  
                　　　　　　　　　　　　//每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                                color: function (params){
                                    var colorList = ['#C21E36','#9EC928','#FF6600','#F3BE34','#34DC34','#42BBBC','#993399','#1A598E'];
                                    return colorList[params.dataIndex];
                                },
                                 //柱子中间显示数据
                                label: {
									show: true, //开启显示
									position: 'bottom', //在上方显示
									textStyle: { //数值样式
										color: 'black',
										fontSize: 14
									}
								}
                            },
                        },
                         /*设置一条平均线*/
                        markLine:{
                            symbol:"none",
                            data : [
                                    [
                                    {name: '平均线', value: 50, x: 38, y:225,lineStyle:{
                                        normal:{
                                            color:"#c5c5c5",
                                        }
                                    }},
                                    {name: '平均线', x: 400, y:225}
                               ],
                            ] 
                        }
                        
                    }],            
                },
 /////////////////////////////////////////////////调试表//////////////////////////////////////////////////////////////////
                 options3:{
                    title: {
                        text: '调试表',
                         x:'center',
                        y:'top',
                        textAlign:'left',
                        padding: 20,
                        textStyle:{
                            color: '#333333',//颜色
                            fontSize: 16,//大小
                            fontWeight: '400',//粗细
                            fontFamily: '思源黑体',//字体
                        }   
                    },
                    //设置表格的padding和margin线
                     grid: {  
                        left: '8%',  
                        right: '10%',  
                        bottom: '3%',  
                        containLabel: true  
                    },
                    tooltip: {},
                    xAxis: {
                        data: ['Dz', 'Iz', 'Sz', 'Cz'],
                        axisLabel:{
                            show: true,
                            textStyle: {
                            color: '#33333',  //更改坐标轴文字颜色
                            fontSize : 14 ,     //更改坐标轴文字大小
                            } 
                        },
                        interval:10,
                        //横轴颜色设置
                        axisLine:{
                            lineStyle:{
                                color:'#c5c5c5'
                            }
                        },
                        //去掉中间的网格线
                         splitLine:{
                            how:false
                        },
                    },
                    
                    // Y周配置
                    yAxis: [
                        {
                              //最大为多少
                            max:-100,
                            //最小为多少
                            min:100,
                            type: 'value',
                            //每次增加几个
                            interval:50, 
                            //去掉中间的网格线
                            splitLine:{
                                    show:false
                            },
                            //去掉y轴坐标
                            axisLine:{
                                show:false
                            },
                            axisTick:{
                                show:false
                            },
                            //改y轴坐标
                             axisLabel:{
                                formatter: function (value) {
                                    var texts = [];
                                    return texts;
                                }
                            }
                        }
                        
                    ],
                    series: [{
                        name: '成绩',
                        type: 'bar',
                        data: [6, -8, -3, 8],
                        //控制柱子的宽度
                        barWidth : 25,
                        //每个主子的样式
                        itemStyle: {   
                            //通常情况下：
                            normal:{  
                　　　　　　　　　　　　//每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                                color: function (params){
                                    var colorList = ['rgb(227,23,13)','rgb(255,255,0)','rgb(34,139,34)','rgb(0,0,255)'];
                                    return colorList[params.dataIndex];
                                },
                                     //柱子中间显示数据
                                label: {
                                        show: true, //开启显示
                                        position: 'top', //在上方显示
                                        textStyle: { //数值样式
                                            color: 'black',
                                            fontSize: 14
                                        }
								}
                            },
                        },
                    }],
                },
 /////////////////////////////////////////////////////////现实的我////////////////////////////////////////////////////// 
                 options4:{
                    title: {
                        text: '现实的我',
                         x:'center',
                        y:'top',
                        textAlign:'left',
                        padding: 20,
                        textStyle:{
                            color: '#333333',//颜色
                            fontSize: 16,//大小
                            fontWeight: '400',//粗细
                            fontFamily: '思源黑体',//字体
                        }   
                    },
                    tooltip: {},
                    grid: {  
                        left: '2%',  
                        bottom: '2%',
                        containLabel: true  
                    },
                    xAxis: {
                        data: ['D', 'I', 'S', 'C'],
                        axisLabel:{
                            show: true,
                            textStyle: {
                            color: '#33333',  //更改坐标轴文字颜色
                             fontSize : 14      //更改坐标轴文字大小
                            } 
                        },
                        interval:10,
                        //横轴颜色设置
                        axisLine:{
                            lineStyle:{
                                color:'#c5c5c5'
                            }
                        },
                        //去掉中间的网格线
                         splitLine:{
                                   show:false
                        },
                    },
                    // Y周配置
                    yAxis: [
                        {
                             //最大为多少
                            max:100,
                            //最小为多少
                            min:0,
                            type: 'value',
                            //每次增加几个
                            interval:50, 
                            // inverse:true,
                            //去掉中间的网格线
                            splitLine:{
                                    show:false
                            },
                        },
                    ],
                    series: [{
                        name: '成绩',
                        type: 'bar',
                        data: [10, 30, 43, 68],
                        //控制柱子的宽度
                        barWidth : 25,
                         itemStyle: {   
                            //通常情况下：
                            normal:{  
                　　　　　　　　　　　　//每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                                color: function (params){
                                    var colorList = ['rgb(227,23,13)','rgb(255,255,0)','rgb(34,139,34)','rgb(0,0,255)'];
                                    return colorList[params.dataIndex];
                                },
                                     //柱子中间显示数据
                                label: {
                                        show: true, //开启显示
                                        position: 'top', //在上方显示
                                        textStyle: { //数值样式
                                            color: 'black',
                                            fontSize: 14
                                        }
								}
                            },
                        },
                        markLine:{
                            symbol:"none",
                        /*自己画一条y轴平均线*/
                        data : [

                                [
                                {name: '平均线', value: 50, x: 35, y:209.5,lineStyle:{
                                    normal:{
                                        color:"#c5c5c5",
                                    }
                                }},
                                {name: '平均线', x: 290, y:209.5}
                               ],
                            ] 
                        }
                    }],
                },
               options5:{},
               options6:{},
               options7:{},
               dataArr:[],
               D1_type:['以自我为中心','直接的','大胆的','霸道的','要求高的','强有力的','风险承担者','冒险的','果断的','好奇的','自信的','竞争的','快的','快的自力更生的'],
               I1_type:['热情的','群居的','有说服力的','冲动的','情感的','自我推销的','信任','有影响力的','令人愉快的','善于交际的','慷慨的','泰然自若的','迷人的','自信的'],
               S1_type:['被动的','病人','忠诚的','可预测的','团队成员','平静','占有的','自满','不活动','轻松的','非抗议的','深思熟虑的','和蔼可亲的','稳定的'],
               C1_type:['完美主义者','精确的','实施调查者','外交的','系统的','传统的','有礼貌的','仔细的','克制的','高标准的','分析的','敏感的','成熟','逃难的'],
               D2_type:['计算风险承担者','自我批评','谦逊的','自卑','现实的','权衡利弊','温顺的','保守的','和平的','温和的','安静的','不确定','依赖的','谦虚的'],
               I2_type:['自信的','令人信服','观察','辨别力','反思的','事实的','逻辑的','受约束的','保守的','可疑的','悲观的','冷漠的','撤回','自觉的','沉默的'],
               S2_type:['稳定的','移动','外向的','警告','渴望的','批评的','不满','坐立不安','浮躁的','不安','变革导向','故障查找','自发的','因现状而沮丧','积极的'],
               C2_type:['“自己人”','自以为是的','固执己见的','持久的','独立的','固执的','固定的','顽固的','任意的','叛逆的','挑衅','难控制的','不得体的','讽刺的'],
               nowtime:0,
               username:'',
            }
        },
       async created(){
           //获取当前日期
            this.nowtime = moment(Date.parse(new Date())).format('YYYY-MM-DD')
            
            this.options5=clone(this.options1);
            this.options5.title.text="";
            this.options5.series[0].markLine.data[0][0].y=144.5;
            this.options5.series[0].markLine.data[0][1].y=144.5;
            this.options5.series[0].markLine.data[0][1].x=220;
            this.options5.grid.left='';
            this.options5.grid.bottom='';

            this.options6=clone(this.options1);
            this.options6.series[0].markLine.data[0][0].y=150;
            this.options6.series[0].markLine.data[0][1].y=150;
            this.options6.series[0].markLine.data[0][1].x=200;


            this.options7=clone(this.options3); 
            
            this.username=localStorage.getItem("username");

            const data= await axios.post('/api/vote/vote_getVoteResult.action?'+querystring.stringify({
                'paperId':'338c4ea12acc11eab69d001e679d0a00',
                'guid':'1578826104371'
            })).then(data=>data.data);
             this.dataArr=data;
              if(this.dataArr.realMe!=null){

                //本我的表格数据
                  this.options1.series[0].data=[
                      parseInt(this.dataArr.realMe.percent_D),
                      parseInt(this.dataArr.realMe.percent_I),
                      parseInt(this.dataArr.realMe.percent_S),
                      parseInt(this.dataArr.realMe.percent_C)
                  ];
                  this.options6.series[0].data=[
                      parseInt(this.dataArr.realMe.percent_D),
                      parseInt(this.dataArr.realMe.percent_I),
                      parseInt(this.dataArr.realMe.percent_S),
                      parseInt(this.dataArr.realMe.percent_C)
                  ];
                  this.options5.series[0].data=[
                      parseInt(this.dataArr.realMe.percent_D),
                      parseInt(this.dataArr.realMe.percent_I),
                      parseInt(this.dataArr.realMe.percent_S),
                      parseInt(this.dataArr.realMe.percent_C)
                  ];
                //现实的我的表格
                this.options4.series[0].data=[
                    parseInt(this.dataArr.naturalMe.percent_D),
                    parseInt(this.dataArr.naturalMe.percent_I),
                    parseInt(this.dataArr.naturalMe.percent_S),
                    parseInt(this.dataArr.naturalMe.percent_C)
                ];
                 //调试表 表格数据
                 this.options3.series[0].data=[
                     parseInt(this.dataArr.changeData.change_percent_D),
                     parseInt(this.dataArr.changeData.change_percent_I),
                     parseInt(this.dataArr.changeData.change_percent_S),
                     parseInt(this.dataArr.changeData.change_percent_C)
                 ];
                 
                 console.log(this.dataArr);

                 this.options7.series[0].data=[
                     parseInt(this.dataArr.changeData.change_percent_D),
                     parseInt(this.dataArr.changeData.change_percent_I),
                     parseInt(this.dataArr.changeData.change_percent_S),
                     parseInt(this.dataArr.changeData.change_percent_C)
                 ];
                 //冰山图标表格数据
                 this.options2.series[0].data=[
                     parseInt(this.dataArr.drivingForceScore.score_control),
                     parseInt(this.dataArr.drivingForceScore.score_information),
                     parseInt(this.dataArr.drivingForceScore.score_understanding),
                     parseInt(this.dataArr.drivingForceScore.score_steady),
                     parseInt(this.dataArr.drivingForceScore.score_reception),
                     parseInt(this.dataArr.drivingForceScore.score_admire),
                     parseInt(this.dataArr.drivingForceScore.score_approve),
                     parseInt(this.dataArr.drivingForceScore.score_challenge)
                 ];
              }


               this.$nextTick(() =>{
                   
                let myChart1 = echarts.init(document.getElementById('demo1'));
                let myChart2 = echarts.init(document.getElementById('demo2'));
                let myChart3 = echarts.init(document.getElementById('demo3'));
                let myChart4 = echarts.init(document.getElementById('demo4'));
                let myChart5 = echarts.init(document.getElementById('demo5'));
                let myChart6 = echarts.init(document.getElementById('demo6'));
                let myChart7 = echarts.init(document.getElementById('demo7'));
                
                myChart1.setOption(this.options1);
                myChart2.setOption(this.options2);
                myChart3.setOption(this.options5);
                myChart4.setOption(this.options6);
                myChart5.setOption(this.options3);
                myChart6.setOption(this.options7);
                myChart7.setOption(this.options4);
            })
        },
    }
</script>